<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Province Clicks Chart</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .chart-container {
            width: 100%;
            height: 600px;
            margin: 0 auto;
        }
        .echart-bar {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center">Province Click Count by Ad ID</h1>
    <div id="chart" class="chart-container"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        axios.get('/api/province_top3/data')
            .then(function (response) {
                const data = response.data;

                // Process data
                const chartData = [];
                data.forEach(item => {
                    chartData.push({
                        province: item.province,
                        adId: item.adId,
                        clickCount: item.clickCount,
                        rank: item.rank
                    });
                });

                const provinces = [...new Set(chartData.map(item => item.province))];
                const adIds = [...new Set(chartData.map(item => item.adId))];

                const seriesData = adIds.map(adId => {
                    return {
                        name: `Ad ID ${adId}`,
                        type: 'bar',
                        stack: 'total',
                        data: provinces.map(province => {
                            const item = chartData.find(d => d.province === province && d.adId === adId);
                            return item ? item.clickCount : 0;
                        }),
                        itemStyle: {
                            color: getColor(adId)
                        },
                        barWidth: '30%' // Adjust width of each bar
                    };
                });

                // Generate a color based on adId
                function getColor(adId) {
                    const colors = ['#FF8C00', '#4682B4', '#32CD32', '#FFD700', '#FF6347', '#6A5ACD', '#00FA9A', '#FF1493', '#8A2BE2', '#00FF7F'];
                    return colors[adId % colors.length];
                }

                const option = {
                    title: {
                        text: 'Province Click Count by Ad ID',
                        subtext: 'Hover over the bars to see Rank',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            const province = params.name;
                            const adId = params.seriesName.replace('Ad ID ', '');
                            const clickCount = params.value;
                            const rank = chartData.find(d => d.province === province && d.adId === +adId).rank;
                            return `Province: ${province}<br/>Ad ID: ${adId}<br/>Click Count: ${clickCount}<br/>Rank: ${rank}`;
                        }
                    },
                    legend: {
                        data: seriesData.map(series => series.name),
                        top: 'bottom'
                    },
                    xAxis: {
                        type: 'category',
                        data: provinces,
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        },
                        boundaryGap: false
                    },
                    yAxis: {
                        type: 'value'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '15%',
                        containLabel: true
                    },
                    series: seriesData,
                    barCategoryGap: '30%', // Adjust the space between different categories
                    barGap: '5%' // Adjust the space between bars within the same series
                };

                const chart = echarts.init(document.getElementById('chart'));
                chart.setOption(option);
            })
            .catch(function (error) {
                console.error('Error fetching data:', error);
            });
    });
</script>
</body>
</html>
